/**
* cover some element-ui styles
* 
* 规则： 
*  1. 全局样式覆盖统一放到 :root 根作用域
*  2. 组件样式覆盖放到组件类名下， 以减少性能消耗
*  tips: element plus 修改 :root 下的 css变量需使用 !important 权重,样式覆盖才能生效
*/
:root {
  // ---------- common ----------

  --el-color-primary: var(--mall-color-primary) !important;
  --el-color-success: var(--mall-success-color) !important;
  --el-color-warning: var(--mall-warning-color) !important;
  --el-color-danger: var(--mall-danger-color) !important;
  --el-color-info: var(--mall-info-color) !important;
  --el-border-color: var(--mall-border-color) !important;
  --el-text-color-primary: var(--mall-text-color-primary) !important;
  --el-text-color-regular: var(--mall-text-color-primary) !important;
  --el-border-radius-base: var(--mall-border-radius) !important;
  --el-border-radius-small: 4px !important;
  /* checkbox input border radius */
  // --el-fill-color-light: #f9f9f9;
  /* select dropdown item hover color*/
  /*card / tabs border color*/
  --el-component-size: 36px !important;
  /*input / select component height*/
  // --el-component-size-large: 50px !important; /*login form input*/
}

// ---------- button ----------

/*
 *  button size
 *  small : 32px
 *  medium: 36px
 *  large:  42px
*/

.el-button {
  --el-button-active-bg-color: var(--mall-color-primary);
  --el-color-primary-light-3: var(--mall-color-primary);
  --el-button-size: 36px !important;
  padding: 8px 20px !important;
  height: 36px !important;

  &:active {
    --el-button-active-bg-color: var(--mall-button-active-color);
    --el-button-active-border-color: var(--mall-button-active-color);
  }

  &--small {
    --el-button-size: 26px;
    padding: 4px 12px !important;
    height: 26px !important;
  }

  &--large {
    --el-button-size: 42px;
    --el-border-radius-round: 6px;
    height: 42px !important;
  }

  &--plain {
    color: var(--mall-color-primary) !important;
    --el-button-border-color: var(--mall-color-primary) !important;
  }
}

// ---------- link ----------
.el-link {
  &--primary {
    --el-link-hover-text-color: var(--mall-color-primary) !important;
  }
  &:hover:after {
    border-color: transparent !important;
  }
}

// ---------- radio ----------

.el-radio,
.el-checkbox {
  &.is-bordered {
    margin-right: 12px;
    margin-bottom: 12px;
    padding: 0 16px !important;
    height: 36px;

    &.is-checked {
      background: #f0f0ff;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        display: inline-block;
        background: url('@/assets/images/icons/icon-radio-checked@2x.svg') no-repeat !important;
        background-size: cover;
        width: 16px;
        height: 16px;
      }
    }

    > .el-radio__input,
    .el-checkbox__input {
      display: none;
    }

    > .el-radio__label,
    .el-checkbox__label {
      padding: 0;
    }
  }

  &-button {
    &__inner {
      padding: 10px 15px !important;
    }
  }
}

// ---------- dialog ----------

.el-dialog {
  &__header {
    padding: 24px !important;
    font-size: 18px;
    font-weight: 700;
  }

  &__body {
    padding: 0 24px !important;
  }

  // dialog footer style
  &__footer {
    padding: 24px !important;
  }
}

// ---------- table ----------
.el-table {
  --el-table-header-text-color: var(--mall-text-color-primary) !important;
}

// ---------- pagination ----------

.el-pagination {
  --el-pagination-font-size: 12px;
  --el-pagination-bg-color: #fff;
}

// ---------- tabs ----------
.el-tabs {
  &--top {
    .el-tabs__active-bar {
      height: 4px;
      // width: 20px !important;
      // margin-left: 12px;
      border-radius: 4px;
      background: #5255fe;
    }

    .el-tabs__nav-wrap::after {
      background: #e5e5e5;
      height: 1px;
    }
  }
}

// ---------- descriptions ----------
.el-descriptions {
  --el-descriptions-table-border: 1px solid #e5e5e5 !important;
}
